<template>
  <div>
    <div class="row">
      <div class="col-2">
        <ul class="list-unstyled text-small text-right mt-5 word-width">
          <li v-for="item in dataMsg.content">{{item.chapter}}</li>
        </ul>
      </div>
      <div class="col-7">
        <h3 class="text-center mb-3 font-weight-bold word-width">
          <p>{{dataMsg.title}}</p>
          <small class="text-muted font-italic">{{dataMsg.author}}</small>
        </h3>
        <div v-for="item in dataMsg.content">
          <h5 class="text-center mb-3 font-weight-bold word-width">
            <small class="text-muted font-italic">{{item.chapter}}</small>
          </h5>
          <ul class="list-unstyled text-small text-center word-width">
            <li v-for="itm in item.paragraphs">{{itm}}</li>
          </ul>
        </div>
      </div>
      <div class="col-3"></div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'DiZiGui',
    data () {
      return {
        dataMsg: {
          'title': '弟子規',
          'author': '李毓秀',
          'content': [
            {
              'chapter': '總敘',
              'paragraphs': [
                '弟子規 聖人訓 首孝弟 次謹信',
                '泛愛眾 而親仁 有餘力 則學文'
              ]
            },
            {
              'chapter': '入則孝',
              'paragraphs': [
                '父母呼 應勿緩 父母命 行勿懶',
                '父母教 須敬聽 父母責 須順承'
              ]
            }
          ]
        }
      }
    },
    computed: {
      dataMessage () {
        return this.$store.getters.dataMsg
      }
    },
    watch: {
      dataMessage () {
        this.dataMsg = this.$store.getters.dataMsg
      }
    },
    mounted: function () {
      if (!this.$store.getters.dataMsg) {
        this.changeUrl()
      }
    },
    methods: {
      changeUrl () {
        let url = null
        if (window.location.href.includes('#/dizigui')) {
          url = '/mengxue/dizigui.json'
        } else if (window.location.href.includes('#/wenzimengqiu')) {
          url = '/mengxue/wenzimengqiu.json'
        } else {
          return
        }
        this.queryDate(url)
      },
      queryDate: function (url) {
        this.$store.dispatch('loadDataMsg', url)
      }
    }
  }
</script>
<style scoped>
  .word-width {
    letter-spacing: 8px;
  }
</style>
